/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/31
 *@description  checkbox-group  component 复选框组
 */
/**
 * #item
 *
 * @type         aty-checkbox-group
 * @cn          复选框组
 * @nameprop    label
 * @menu        表单
 * @stPlugin    true
 * @stContainer false
 * @children    [aty-checkbox ]
 * @mixins      [./components/components/form/form-item/form-item.js]
 */
import config from '../../../config/config.js'
import formItem from '../form-item/form-item.js'
// components
import Checkbox from '../checkbox/index.vue'

// prefix
const componentName = config.prefix + '-checkbox-group'
// module
const module = {
  name: componentName,
  mixins: [formItem],
  components: { Checkbox },
  model: {
    prop: 'value', // 属性名
    event: 'change' //  事件名
  },
  props: {
    /**
     * #property
     *
     * @name    name
     * @cn      属性名称
     * @group   基本属性
     * @type    string
     * @description  HTML Checkbox 对象 的原生name属性
     */
    name: {
      type: String
    },
    /**
     * #property
     *
     * @name    value
     * @cn      值
     * @group   基本属性
     * @type    array
     * @bind    must
     * @description 组件的值，值为一个数组对象
     */
    value: {
      type: Array,
      default () {
        return []
      }
    },
    /**
     * #property
     *
     * @name    codeType
     * @cn      代码类型
     * @group   基本属性
     * @type    codetype
     * @bind    mustnot
     * @description 代码类型
     */
    codeType: {
      type: String,
      default: null
    },
    /**
     * #property
     *
     * @name    dataList
     * @cn      数据列表
     * @group   数据
     * @type    array
     * @bind    must
     * @description 值为一个数组对象，对象包含如下格式的值：[ ...{code:'',  codeType:'', name:''  }]
     *
     */
    dataList: {
      type: Array,
      default () {
        return []
      }
    },
    /**
     * #property
     *
     * @name    disabled
     * @cn      是否禁用
     * @group   控制
     * @type    boolean
     * @value  false
     * @description 该选项下的所有checkbox是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    filterFunction
     * @cn      过滤函数
     * @group   基本属性
     * @type    function
     * @bind    must
     * @description 过滤数据函数
     */
    filterMethod: Function
  },
  data () {
    return {
      // 当前数据列表
      currentDataList: []
    }
  },
  watch: {
    // 监听数据变化
    dataList: {
      deep: true,
      immediate: true,
      handler (newValue, oldValue) {
        if (this.filterMethod) {
          this.currentDataList = this.filterMethod(JSON.parse(JSON.stringify(newValue)))
        } else {
          this.currentDataList = JSON.parse(JSON.stringify(newValue))
        }
      }
    }
  },
  computed: {
    wrapClasses () {
      return [
        `${componentName}-wrapper`
      ].concat(this.formItemClasses)
    },
    wrapStyles () {
      return this.formItemStyles
    }
  },
  methods: {
    checkedChange (value, event) {
      let dataItem = []
      if (this.currentDataList.length > 0 && value.length > 0) {
        dataItem = this.currentDataList.filter(item => value.includes(item.code))
      }
      /**
       * #event
       *
       * @name    change
       * @param   value   当前选中的所有值
       * @param   dataItem   当前选中的所有值所对应的所有对象
       * @param   event   当前事件的event对象
       * @body
       * @description 数据改变时触发
       */
      this.$emit('change', value, dataItem, event)
    },
    handleCodeData (datas) {
      if (this.filterMethod) {
        datas = this.filterMethod(datas)
      }
      this.currentDataList = datas
    },
    loadCodeData () {
      if (!this.codeType || this.codeType === '') {
        return
      }
      Artery.loadCode(this.codeType).then(codeList => this.handleCodeData(codeList))
    }
  },
  beforeMount () {
    // 加载代码值数据
    this.loadCodeData()
  }
}
export default module
